<!-- 分类展示：first-two 风格  -->
<template>
  <view class="ss-flex-col">
    <!-- <view class="ss-flex flex-wrap"> -->
	
	<s-empty v-if="pagination.list.length === 0" text="商品持续更新,敬请期待~" icon="/static/data-empty.png" />
      <view class="goods-box" v-for="(item,index) in pagination?.list" :key="item.id">
		  
        <view class="goods-box_view">
			
			
			<view class = "goods-box_view_top">
				
				
				
			
          <view class="goods-imgView"  @click="sheep.$router.go('/pages/goods/index', { id: item.id })">
            <image class="goods-imgv" :src="item.picUrl" mode="scaleToFill" />
          </view>
          <view class="goods-content">
		    <view  @click="sheep.$router.go('/pages/goods/index', { id: item.id })" class="goods-title ss-line-2 ss-m-b-28">{{ item.name }}</view> 
		  <view class="qdView">			  	
		  	<view
		  	class=" redu"
		  	v-if="item.skuIds[0].purchaseMinimum !=1"
		  	>	
		  		起订: {{item.skuIds[0].purchaseMinimum}}		
		  	</view>
		  	
		  	
		  	<view
		  	class=" redu"
			:style ="item.skuIds[0].purchaseMinimum != 1 ? left:''"
		  	v-if="item.skuIds[0].purchaseMaximum != -1"
		  	>	
		  		限购: {{item.skuIds[0].purchaseMaximum}}		
		  	</view>
		  		
		  </view>
		  
	  
		  
            <view  @click="sheep.$router.go('/pages/goods/index', { id: item.id })" class="goods-price top">￥{{ fen2yuan(item.price) }}</view>
			
			 <!-- <view class="goods-introduction ss-line-2">{{ item.introduction}}</view> -->
			
			 <view class="goods-carbuttonView">			
				  <image v-if="item.skuIds[0].cartCount == 0" @tap="onclickcart(index)" class="item-icon" :src="sheep.$url.static('/static/images/cg.png')" mode="aspectFit" />
				  <view  v-if="item.skuIds[0].cartCount != 0" class="ss-reset-button cart-btn">
				   <su-number-box :min="0" :max="item.skuIds[0].purchaseMaximum > -1 ? item.skuIds[0].purchaseMaximum : 9999" :step="1" :value='item.skuIds[0].cartCount'
				     @change="onNumberChange($event, index)" />
				  </view>
				 
			 </view>
			
			
          </view>
		  
		  
		  
		  </view>
		  
		  <view class="jz ss-line-1"  v-if="item.skuIds[0].netWeight != 0" >
		  	 
			 <text >净重<text v-if="!item.standardPiece"> 约</text>{{item.skuIds[0].netWeight}}斤  |  <text v-if="!item.standardPiece">约</text>￥{{fen2yuan(item.skuIds[0].netPrice)}}/斤</text>
		  	
		  </view>
		  
		  <view class="jz ss-line-1" v-else>
		  	 
		  			 <text >{{item.specDetail.specTag}}  | ￥{{item.specDetail.specUnitTag}}</text>
		  	
		  </view>
		  
		  
        </view>
		
		
		
		
		
		
		
      </view>
    <!-- </view> -->
	
	
	
  </view>
</template>

<script setup>
	
 import { computed, reactive, onMounted } from 'vue';
  import sheep from '@/sheep';
  import { fen2yuan } from '@/sheep/hooks/useGoods';
  import $store from '@/sheep/store';
  import { showAuthModal, showShareModal } from '@/sheep/hooks/useModal';
  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
 import CartApi from '@/sheep/api/trade/cart';



  const props = defineProps({
    pagination: Object,
  });
  
 const left = computed(() => {
    return {
      'margin-left':  '10rpx',
      // 'margin-left: 10rpx;'
     
    };
  });
  // 返回事件
  const emits = defineEmits(['onclickcart', 'onNumberChange']);
  
  const onclickcart = (e) => {
    emits('onclickcart',e)
  };   
  
  const onNumberChange = (e,index) => {
	  
	  // console.log('index',index)
	   // console.log('e',e)
	  var  dict = {
		  index:index,
		  number:e
	  }
    emits('onNumberChange',dict)
  }; 
 
</script>

<style lang="scss" scoped>
  .goods-box {
    width: calc((100% - 20rpx) );
	// background-color: yellow;
    margin-bottom: 20rpx;


   .goods-imgView{
	
  	  margin-top: 10rpx;
    }
    .goods-imgv {
       width: 200rpx;
      height: 200rpx;
      border-radius: 10rpx 10rpx 0px 0px;
    }

    .goods-content {
		
		
      width: 100%;
      background: #ffffff;
      // box-shadow: 0px 0px 20rpx 4rpx rgba(199, 199, 199, 0.22);
      padding: 20rpx 0 32rpx 16rpx;
      box-sizing: border-box;
      border-radius: 0 0 10rpx 10rpx;

      .goods-title {
        font-size: 26rpx;
        font-weight: bold;
        color: #333333;
      }
      .goods-introduction{
		
		color:#5E5E61;
		padding-top: 10rpx;
		 font-size: 20rpx;
		 font-weight: 500;
	   }
	
      .goods-price {
		margin-top:20rpx;
        font-size: 24rpx;
        font-family: OPPOSANS;
        font-weight: 500;
        color: #e1212b;
      }
    }

    &:nth-child(2n + 1) {
      margin-right: 20rpx;
    }
  }
  .goods-box_view_top{
	  
	  display: flex;
  }
  
  .goods-box_view {
	  
	   // display: flex;
	   
	   // background: red;
	   padding-bottom: 10rpx;
	   border-bottom: solid;
	   border-bottom-width: 2rpx;
	   border-bottom-color: lightgray;
  }
  
  .goods-carbuttonView {
	  
	   display: flex;
	   justify-content:flex-end;
	   // margin-left: 140rpx;
	   // margin-top: 60rpx;
	   // background: red;
  }
  
  .carbutton{	
  		 color: white;
  	     background: linear-gradient(to right,#FF6000 ,#FE832A );	  
  }
  
  .item-icon {
	  width:  60rpx;
	  height: 60rpx;
  }
  
  
  
  
  .qdView{
  	  
  	  display: flex;
  	  justify-content: start;
  }
  .redu {
  	  
  	 
  	  	  min-width: 70rpx;
  		  // padding-top:5rpx;
  		  // padding-bottom:10rpx;
  		  color:#5E5E61;
		  padding:0 4rpx;
  		  // padding-top: 10rpx;
  		   font-size: 20rpx;
  	  	  height: 32rpx;
  	  	  line-height: 32rpx;
  	  	  text-align: center;
  	  	  border-radius: 2rpx;
  	  	  border-width: 0.5rpx;
  	  	  border-style: solid;
  	  
  }
  .xigou {
  	  
  	   margin-left: 10rpx;
  	  
  }
  
  .jz{
	  font-size: 26rpx;
	   color:#5E5E61;
	   font-weight: 500;
	   
	  
  }
  
 
</style>
